<template>
    <div class="header">
        <div class="inner-header flex">
            <svg
                version="1.1"
                class="logo"
                baseProfile="tiny"
                id="Layer_1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                x="0px"
                y="0px"
                viewBox="0 0 500 500"
                xml:space="preserve"
            >
        <path
            fill="#FFFFFF"
            stroke="#000000"
            stroke-width="10"
            stroke-miterlimit="10"
            d="M57,283"
        />
                <g></g>
      </svg>
            <div class="content_noPage">
                <div
                    class="noPage animate__animated animate__bounceInDown animate__animated"
                >
                    404
                </div>
                <div class="tip animate__animated animate__fadeInUp animate__animated">
                    {{ $t('common.notFound') }}
                </div>
                <el-button
                    @click="goBack"
                    class="animate__animated animate__fadeInUp animate__animated"
                >
                    {{ $t('common.backHome') }}
                </el-button>
            </div>
        </div>

        <div>
            <svg
                class="waves"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="0 24 150 28"
                preserveAspectRatio="none"
                shape-rendering="auto"
            >
                <defs>
                    <path
                        id="gentle-wave"
                        d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
                    />
                </defs>
                <g class="parallax">
                    <use
                        xlink:href="#gentle-wave"
                        x="48"
                        y="0"
                        fill="rgba(255,255,255,0.7"
                    />
                    <use
                        xlink:href="#gentle-wave"
                        x="48"
                        y="3"
                        fill="rgba(255,255,255,0.5)"
                    />
                    <use
                        xlink:href="#gentle-wave"
                        x="48"
                        y="5"
                        fill="rgba(255,255,255,0.3)"
                    />
                    <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"/>
                </g>
            </svg>
        </div>
    </div>

    <div class="content flex">
        <p></p>
    </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router"

const router = useRouter()
const goBack = () => {
    // 回到首页
    router.push("/home")
}
</script>

<style scoped lang="scss">
body {
    margin: 0;
}

.content_noPage {
    font-family: Lato, sans-serif;

    .noPage {
        font-size: 160px;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .tip {
        margin-bottom: 10px;
        font-size: 20px;
    }

    .el-button {
        width: 100%;
        margin-top: 20px;
    }
}

p {
    font-family: Lato, sans-serif;
    font-size: 14px;
    color: #333;
    letter-spacing: 1px;
}

.header {
    position: relative;
    color: white;
    text-align: center;
    background: linear-gradient(
            60deg,
            rgb(84 58 183 / 100%) 0%,
            rgb(0 172 193 / 100%) 100%
    );
}

.logo {
    display: inline-block;
    width: 50px;
    padding-right: 15px;
    vertical-align: middle;
    fill: white;
}

.inner-header {
    width: 100%;
    height: 65vh;
    padding: 0;
    margin: 0;
}

.flex {
    /* Flexbox for containers */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    min-height: 100px;
    max-height: 150px;
    margin-bottom: -7px; /* Fix for safari gap */
}

.content {
    position: relative;
    height: 20vh;
    text-align: center;
    background-color: white;
}

/* Animation */

.parallax > use {
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.parallax > use:nth-child(1) {
    animation-duration: 7s;
    animation-delay: -2s;
}

.parallax > use:nth-child(2) {
    animation-duration: 10s;
    animation-delay: -3s;
}

.parallax > use:nth-child(3) {
    animation-duration: 13s;
    animation-delay: -4s;
}

.parallax > use:nth-child(4) {
    animation-duration: 20s;
    animation-delay: -5s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/* Shrinking for mobile */
@media (width <= 768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }

    .content {
        height: 30vh;
    }

    h1 {
        font-size: 24px;
    }
}
</style>
